<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>年会抽奖</title>
<script type="text/javascript" src="http://www.hurongclub.com/Resources/js/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
img{display:block;}
i{font-style:normal;}
.vetically{justify-content:center;align-items:center;display:-webkit-flex;}
.back_level{position: absolute;width: 100%;height: 100%;background: url(images/firstp_bg.jpg) no-repeat left top / 100% 100%;overflow: hidden;}
.prize_con{top:40px;z-index:10;position: absolute;width: 100%;height: 90%;overflow: hidden;}
.text_scream{top:200px;z-index:20;position: absolute;width: 100%;height: 700px;overflow: hidden;}
.prize_grade,.award_level h1{font-size:98px;color: #ffe9af;text-align: center;margin: 10px auto 0;}
.prize_list,.award_list{width:90%;height:670px;margin: 20px auto 55px;text-align: center;overflow: hidden;}
.prize_list ul,.award_list ul{width:60%;font-size:0;}
.prize_list li,.award_list li{display:inline-block;font-size:45px;color:#f1bf90;text-align: center;width:50%;line-height:70px;font-family:Arial;}
.start{width: 250px;height: 90px;margin:0 auto;cursor:pointer;}
.prize_set{display:none;position: absolute;right: 60px;bottom: 40px;font-size: 16px;color: #f7f3e8;line-height: 30px;}
.prize_set li{display: inline-block;margin-left: 20px;}
.set_grade select,.set_people select, .set_money input{background: #fff;width:110px;height:36px;border:1px solid #8f0000;margin-left: .1rem;color: #000;padding-left:10px;}
.award_level{
	z-index:30;
	position: absolute;width: 100%;height: 100%;background: #8F0000;display:none;
	text-align: center;
}
.award_level span{
	display: inline-block;
    width: 250px;
    height: 90px;
    line-height: 90px;
    background: #e4c06d;
    margin: 0 auto;
    cursor: pointer;
    font-size: 55px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color:#FFFFFF;
}



.back_level span{
	margin:5px 0px 0px 10px;
	text-align: center;
	display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 30px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	color:#FFFFFF;

}
.award_list{}
.scream_item{
	width:100%;
	height:90px;
	overflow: hidden;
}
.scream_item ul{ display: block;
    white-space:nowrap;float: right;margin-right:-100px;}
.scream_item ul li{padding-left:5px;display: inline-block;font-size: 40px;height: 90px;line-height: 90px;}

.scream_award{
	top:100px;
	position: absolute;
	width:450px;
	height:750px;
	background-color:black;
	filter:alpha(Opacity=80);
	-moz-opacity:0.8;
	opacity: 0.8; 
	z-index:26;
	display:none;
}
.scream_award_title{
	font-size: 40px;
	color: #e4c06d;
	text-align: center;
	height: 50px;
	line-height: 40px;
	padding-top:5px ;
}
.scream_award_list{
	overflow-x: hidden;
	overflow-y:scroll;
	height:690px;
}
.scream_award_list .item{
	font-size: 30px;
	color: #FFFFFF;
	padding-left:10px;
}
.on{
	background: #ff0000;
	box-shadow: 10px 10px 5px #313131;
}
.off{
	background: #c38618;
	box-shadow: 10px 10px 5px #313131;
}
.ewm_level{
	padding-top:10px;
	position: absolute;
	z-index: 18;
	right:0px;
	width:300px;
	height: 300px;
	filter:alpha(Opacity=90);
	-moz-opacity:0.9;
	opacity: 0.9;
	background-color: black;
	text-align: center;
}
.ewm_level img{
	width:200px;
	height: 200px;
	margin:5px 50px ;
	
}
.ewm_level i{
	font-size: 30px;
	color: #FFFFFF;
}
.allAward{
	width:100%;
	height:100%;
	position: absolute;
	z-index: 35;
	background: #FF0000;
}
.hide{
	display:none;
}
.allAward .item{
	display: inline-block;
	width: 49%;
	height: 100%;
	overflow: auto;
	border-left: solid 1px #000000;
}
.allAward .item li{
	padding:5px 10px;
	color: #FFFFFF;
	font-size: 25px;
	display: inline-block;
	
}
.go_right {
	margin-left: 500px;
}
.show_logo {
	padding-top:600px;
	position: absolute;
	z-index: 18;

	width:300px;
	height: 180px;

	text-align: center;
}

.show_logo img{
	width:300px;
	height: 180px;
	margin:0px ;
	
}
</style>
</head>
<body>
<div class="allAward hide">
	<div class="item">
		<h1>弹幕中奖</h1>
		<ul class="allS"></ul>
	</div>
	<div class="item">
		<h1>抽取中奖</h1>
		<ul class="allP"></ul>
		
	</div>
</div>
	<div class="scream_award">
		<div class="scream_award_title">弹幕中奖公示</div>
		<div class="scream_award_list">
			<div class="item">等待抽奖结果.........</div>
			
			
		</div>
	</div>
<div class="wrap">
	<div class="show_logo">
		<img src="images/skycloud.png">
	</div>
	<div class="ewm_level">
		<i>扫码发弹幕</i>
		<img src="m/speak_qrcode_color.png"/>
		<i>还能抽礼物</i>
	</div>
	<div class="back_level">
		
		<div class="go_right">
			
			<span class="cotrol_award on">抽奖</span><span class="cotrol_scream on">弹幕</span>
			<span class="cotrol_getaward on" style="display: none;">弹幕中奖公示</span>
			<span class="start_button off">弹幕抽奖</span>
		</div>
		
	</div>
	<div class="text_scream">
  			<div class="scream0 scream_item">
  				<ul></ul>
  			</div>
  			<div class="scream1 scream_item">
  				<ul></ul>
  			</div>
  			<div class="scream2 scream_item">
  				<ul></ul>
  			</div>
  			<div class="scream3 scream_item">
  				<ul></ul>
  			</div>
  			<div class="scream4 scream_item">
  				<ul></ul>
  			</div>
  	</div>
  <div class="prize_con">	
      <p class="prize_grade"><span>开始抽奖</span><i></i></p>
        <div class="prize_list vetically">
          <ul>
            <li>等待抽奖.............</li>
           
             
          </ul>
        </div>
      <p class="start" style="display: none;"><img src="images/prize_start.png" alt=""></p>
      <ul class="prize_set">
          <li class="set_grade">奖等
            <select id="set_grade">
              <option>选择奖等</option>
              <option value="0">特等奖</option>
              <option value="1">一等奖</option>
              <option value="2">二等奖</option>
              <option value="3">三等奖</option>
              <option value="4">幸运奖</option>
            </select>
          </li>
          <li class="set_people">人数
          	<select id="prizeCount">
          		<option>中奖人数</option>
              <option>1</option>
              <option>2</option>
              <option>6</option>
              <option>8</option>
          	<select/>
          </li>
        </ul>
  </div>
  <div class="award_level">
  	<h1>恭喜<i class="award_people"></i>人获得<i class="award_what"></i></h1>
  	<div class="award_list vetically"></div>
  	<span class="close_award_level">关闭</span>
  </div>
</div>
<input type="hidden" value="0" id="prize_btn">
<script>
  var myNumber;
  var arr = [];
  var code = [302610,210022,159862,158602,145635,856997,586223,546221,145213,987451,251364,854136,581698,123785,521387,752169,718954,412321,898989,121245,788565,458558,589659,455212,964632,458412,223344,112233,335566,778899];
//  var apiHost="http://121.201.78.13/";
  var apiHost="http://www.thoughtmocks.com:8080/";
  var screamCount=0;
  var resultArr=[];
  var screamWinners=[];
  var screamAwardCount=0;
  fiveGet=null;
  /*随机所有的code并且不重复*/
  function showRandomNum(num) {
  	arr = [];
  	resultArr=[];
    var li = "";
    for(var i = 0; i < code.length; i++){
      arr[i] = i;
    }
    arr.sort(function(){
      return 0.5 - Math.random();
    });

    for(var i = 0; i < num; i++){
      var index = arr[i];
      li += '<li>'+code[index].replace(/^(.{3})(.{4})(.*)$/, '$1****$3')+'</li>';
      resultArr[i]=code[index];
    }

    $(".prize_list ul").html(li);
  }
  function requestGet(rasyn,rapi,rfun){
  	$.ajax({  
             type: "get", 
             async: rasyn,
             url: apiHost+rapi,  
             dataType: "json",
             success: rfun, 
             error: function(){  
                 //alert("服务出错!");  
             }  
        });
  }
    function requestPost(rasyn,rapi,rfun,refun,data){
  	$.ajax({  
             type: "post",  
             async: rasyn,  
             url: apiHost+rapi,
             traditional:true,
             data:data,

             success: rfun, 
             error: refun
        });
  }
 function init(){
 	//初始化获取参与抽奖的手机号
 	requestGet(false,"api/mobile/available",function(bb){
                 code=bb.data;  
                  $(".prize_grade i").text("0/"+code.length);
                  $(".prize_grade span").text("开始抽奖");
                  $("#prizeCount").val("中奖人数");
                  $("#set_grade").val("选择奖等");
                  $(".prize_list ul").empty().append("<li>等待抽奖.......</li>");
                 $(".start").show();
                 //显示抽奖配置项按钮
          		$(".prize_set").show();
           });
 }
 //启动弹幕抽奖
 function startScreamAward(){
 	requestGet(false,"api/bullet/prize/begin",function(bb){
                 if(bb.result){
                 	//隐藏启动按钮
                 	$(".start_button").hide();
                 	//打开获奖记录
                 	$(".scream_award").show();
                 	$(".cotrol_getaward").show();
                 	//开启倒计时
                 	if(!fiveGet){
                 		fiveGet = setInterval(function(){
				            getScreamAwards();
				    		}, 30000);//5分钟获取一次弹幕中奖列表
                 	}
                 }else{
                 	//什么情况会传回false
                 }
            });
 }
 //获取弹幕抽奖中奖信息
 function getScreamAwards(){
 	requestGet(false,"api/bullet/prize/winners",function(bb){
                 if(bb.result){
                 	if(screamAwardCount<bb.winners.length){
                 		//更新页面获奖列表
                 		screamAwardCount=bb.winners.length;
                 		var itemList="";
                 		for (var i=0; i<screamAwardCount;i++) {
                 			itemList+="<div class='item'>"+bb.winners[i].replace(/^(.{3})(.{4})(.*)$/, '$1****$3')+"</div>";
                 		}
                 		$(".scream_award_list").empty().append(itemList);
                 		screamWinners=bb.winners;
                 	}
                 	
                 }else{
                 	
                 }
            });
 }
  $(function () {
  	init();
  	//初次获取弹幕中奖列表，若有列表，则隐藏开启弹幕按钮
  	requestGet(false,"api/bullet/prize/winners",function(bb){
                 if(bb.result){
                 	if(bb.winners.length>0){
                 		//更新页面获奖列表
                 		screamAwardCount=bb.winners.length;
                 		var itemList="";
                 		for (var i=0; i<screamAwardCount;i++) {
                 			itemList+="<div class='item'>"+bb.winners[i].replace(/^(.{3})(.{4})(.*)$/, '$1****$3')+"</div>";
                 		}
                 		$(".scream_award_list").empty().append(itemList);
                 		screamWinners=bb.winners;
                 		//隐藏启动按钮
	                 	$(".start_button").hide();
	                 	//打开获奖记录
	                 	$(".scream_award").show();
	                 	$(".cotrol_getaward").show();
	                 	//开启倒计时
	                 	if(!fiveGet){
	                 		fiveGet = setInterval(function(){
					            getScreamAwards();
					    		}, 30000);//5分钟获取一次弹幕中奖列表
	                 	}
                 	}
                 	
                 }else{
                 	
                 }
            });
  	//开启弹幕抽奖按钮
  	$(".start_button").click(function(){
  		startScreamAward();
  	});
  	//打开或隐藏抽奖
  	$(".cotrol_award").click(function(){
  		if($(this).hasClass("on")){
  			$(this).removeClass("on").addClass("off");
  		}else{
  			$(this).removeClass("off").addClass("on");
  		}
  		$(".prize_con").toggle();
  	});
  	//打开或隐藏弹幕
  	$(".cotrol_scream").click(function(){
  		if($(this).hasClass("on")){
  			$(this).removeClass("on").addClass("off");
  		}else{
  			$(this).removeClass("off").addClass("on");
  		}
  		$(".text_scream").toggle();
  	});
  	//打开或隐藏弹幕中奖信息
  	$(".cotrol_getaward").click(function(){
  		if($(this).hasClass("on")){
  			$(this).removeClass("on").addClass("off");
  		}else{
  			$(this).removeClass("off").addClass("on");
  		}
  		$(".scream_award").toggle();
  	});
  	
    $(".start").click(function(){
      if($("#prize_btn").val() == 0){        
        if($("#set_grade").val() == "选择奖等") {
            alert("请选择奖等");
            return;
        }else if($("#prizeCount").val() == "中奖人数") {
            alert("请选择中奖人数");
            return;
        }else if($("#prizeCount").val() > 10) {
            alert("单次中奖人数不能超过10人");
            return;
        }else if($("#prizeCount").val() >= code.length) {
            alert("中奖人数必须小于参与抽奖人数");
            return;
        }else{
          $("#prize_btn").val(1);
          var num = $("#prizeCount").val();
          $(this).find("img").attr("src","images/prize_stop.png");

          myNumber = setInterval(function(){
            showRandomNum(num);
          }, 30);
          //隐藏抽奖配置项按钮
          $(".prize_set").hide();
        }        
      }else{//停止
      	$(".start").hide();
        $("#prize_btn").val(0);
        clearInterval(myNumber);
        $(this).find("img").attr("src","images/prize_start.png");
        //中奖提示内容
        $(".award_list").empty().append($(".prize_list").html());
        $(".award_people").empty().append($("#prizeCount").find("option:selected").text());
        $(".award_what").empty().append($("#set_grade").find("option:selected").text());
        
        //中奖提示层显示
        $(".award_level").slideDown(3000);
        
      } 
      
    });
    //关闭中奖提示层
	$(".close_award_level").click(function(){
		
		//提交中奖号码
		requestPost(true,"api/prize/result",function(bb){
                 if(bb.result){
                 	$(".allP").append("</br><li>------------"+$("#set_grade").find("option:selected").text()+$("#prizeCount").val()+"人----------</br>"+$(".prize_list").html()+"</li>");
                 	//抽奖页面初始化
					init();
					$(".award_level").hide();
                 }else{
                 	alert("老子没中奖，不算，重来！");
                 	
                 }
             },function(){  
                  alert("老子没中奖，不算，重来！");
                 
             },{ "prizeLevel":$("#set_grade").val(), "winners":resultArr });
	});
    //回车键控制开始和停止
    $(document).keydown(function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) { // enter 键
            $(".start").click();
        }else if(e && e.keyCode == 32){
        		if($(".allAward").hasClass("show")){
        			$(".allAward").removeClass("show").addClass("hide");
        		}else{
        			if(screamWinners.length>0){
        				var count=1;
        				var numb=0;
        				var alist="";
        				for (var i=screamWinners.length-1;i>=0;i--) {
        					if(numb%20==0){
        						alist+="</br><li>--------------------第"+count+"次弹幕中奖-----------------------</li></br>";
        						count++;
        					}
        					alist+="<li>"+screamWinners[i].replace(/^(.{3})(.{4})(.*)$/, '$1****$3')+"</li>";
        					numb++;
        				}
        				$(".allS").empty().append(alist);
        			}
        			
        			
        			$(".allAward").removeClass("hide").addClass("show");
        			
        		}
        }
    });

    $("#set_grade").change(function(){
    		if($(this).val()=="选择奖等"){
    			 $(".prize_grade span").text("开始抽奖");
    		}else{
    			$(".prize_grade span").text($(this).find("option:selected").text());
    		}
      
    });
	$("#prizeCount").change(function(){
		if($(this).val()=="中奖人数"){
			$(".prize_grade i").text("0/"+code.length);
			return;
		}
		if($("#prizeCount").val() >= code.length){
			alert("中奖人数必须小于参与抽奖人数");
			$(this).val("中奖人数");
			$(".prize_grade i").text("0/"+code.length);
			return;
		}
      $(".prize_grade i").text($(this).val()+"/"+code.length);
    });
    //添加li标签产生滚动效果
    textroll = setInterval(function(){
            $(".scream_item ul").append("<li>&nbsp;&nbsp;</li>");
    }, 100);
    //取弹幕信息加入滚动以及计时器
    getrolltext = setInterval(function(){
    		//计时器
    		//取弹幕
    		requestGet(true,"api/bullet/available",function(bb){
                 var textlist=bb.data;  
                 if(textlist.length>0){
                 	for(var i=0;i<textlist.length;i++){
                 		$(".scream"+screamCount%5+" ul").append("<li>"+textlist[i]+"</li>")
                 		screamCount++;
                 	}
                 	
                 }
            })}, 3000);
    //测试写入弹幕
//    addrolltext = setInterval(function(){
//    		requestPost(true,"api/bullet/message",function(bb){
//
//            },function(){},{ "mobile":"13698979599", "message":"弹幕测试" })}, 120000);

}); 
</script>
</body>
</html>
